<!doctype html>
<html lang="zh-CN" style="">
	<head>
		<link rel="stylesheet" type="text/css" href="http://webapi.amap.com/theme/v1.3/style1536672475627.css">
		<style type="text/css">
			.amap_lib_placeSearch {
				font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
				color: #565656;
				font-size: 12px;
				line-height: 22px;
				word-wrap: break-word;
				background-color: #fff;
				border: 1px solid silver;
				-webkit-text-size-adjust: none;
				text-size-adjust: none
			}

			.amap_lib_placeSearch .pageLink {
				cursor: pointer;
				line-height: 16px;
				display: inline-block;
				text-align: center;
				padding: 0 4px
			}

			.amap_lib_placeSearch.mobile .pageLink {
				border: 1px solid #ddd;
				background: #eee;
				padding: 2px 3px
			}

			.amap_lib_placeSearch .pageLink:hover {
				background: #ccc
			}

			.amap_lib_placeSearch .pageLink.current {
				background: #0091ff;
				color: #fff
			}

			.amap_lib_placeSearch_list {
				background: #fff
			}

			.amap_lib_placeSearch .poibox .poibox-icon {
				margin-left: 7px;
				margin-top: 4px
			}

			.amap_lib_placeSearch_page {
				white-space: nowrap;
				text-align: right;
				background: #e5ecf9;
				margin-top: 5px;
				padding: 2px;
				overflow: hidden
			}

			.amap_lib_placeSearch_page>div {
				float: left;
				margin-right: 5px
			}

			.amap_lib_placeSearch_page>div>p {
				margin: 0;
				padding: 0;
				white-space: nowrap
			}

			.amap_lib_placeSearch_ol {
				list-style: none;
				padding: 0;
				margin: 0
			}

			.amap_lib_placeSearch_li {
				margin: 2px 0;
				padding: 0 5px 5px 0;
				cursor: pointer;
				overflow: hidden;
				line-height: 17px
			}

			.amap_lib_placeSearch_li .amap_lib_placeSearch_li_wrap {
				overflow: hidden;
				padding: 0 5px
			}

			.amap_lib_placeSearch_li_wrap_selected {
				background-color: #f0f0f0
			}

			.amap_lib_placeSearch_li>div .amap_lib_placeSearch_li_title {
				line-height: 20px;
				font-size: 12px
			}

			.amap_lib_placeSearch_li>div .amap_lib_placeSearch_li_title span {
				color: #00c
			}

			.amap_lib_placeSearch_li>div .amap_lib_placeSearch_li_title a {
				margin-left: 5px;
				font-size: 12px;
				color: #3d6dcc;
				font-weight: 400;
				text-decoration: none
			}

			.amap_lib_placeSearch_li>div .amap_lib_placeSearch_li_text {
				padding: 2px 0;
				line-height: 18px;
				overflow: hidden
			}

			.amap_lib_placeSearch_li>div .amap_lib_placeSearch_li_text b {
				float: left;
				font-weight: 700;
				overflow: hidden;
				padding-right: 5px
			}

			.amap_lib_placeSearch_li>div .amap_lib_placeSearch_li_text span {
				color: #666;
				display: block;
				zoom: 1;
				overflow: hidden
			}

			.amap-lib-infowindow .amap-lib-infowindow-content-wrap {
				word-break: break-all;
				overflow: hidden;
				zoom: 1
			}

			.amap-lib-infowindow {
				padding: 0;
				position: relative;
				background-color: #fff;
				margin: 8px
			}

			.amap-lib-infowindow-title {
				line-height: 22px;
				font-size: 14px;
				border-bottom: 1px #99adce solid;
				padding-right: 15px
			}

			.amap-lib-infowindow-content {
				padding-top: 5px;
				overflow: hidden;
				font-size: 12px;
				zoom: 1
			}

			.selected .amap_lib_placeSearch_poi {
				background-image: url(http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png)
			}

			.amap_lib_placeSearch_poi {
				background: url(http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png) no-repeat;
				height: 31px;
				width: 19px;
				cursor: pointer;
				left: -1px;
				text-align: center;
				color: #fff;
				font: 12px arial, simsun, sans-serif;
				padding-top: 3px
			}

			.selected .amap_lib_placeSearch_child_poi {
				background-image: url(http://webapi.amap.com/theme/v1.3/hotNewRed.png)
			}

			.amap_lib_placeSearch_child_poi {
				width: 11px;
				height: 11px;
				border: 1px solid #eee;
				border-radius: 6px;
				background: url(http://webapi.amap.com/theme/v1.3/hotNew.png) center center no-repeat;
				text-indent: -10000em;
				overflow: hidden
			}

			.poi-children-box {
				padding: 3px 0 3px 25px
			}

			.poi-child-item.selected {
				border-color: #e17070
			}

			.poi-child-item {
				display: inline-block;
				line-height: 180%;
				border: 1px solid #ccc;
				background: #f3f3f3;
				margin: 0 3px 3px 0;
				padding: 0 3px;
				width: 27%;
				min-width: 40px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				vertical-align: middle;
				text-align: center
			}

			.poi-child-item:hover {
				background: #ddd
			}

			.amap_lib_placeSearch .amap_lib_placeSearch_poi {
				position: absolute
			}

			.amap_lib_placeSearch ol,
			.amap_lib_placeSearch ul {
				list-style: none;
				margin: 0;
				padding: 0
			}

			.amap_lib_placeSearch .poibox {
				border-bottom: 1px solid #eaeaea;
				cursor: pointer;
				padding: 5px 0 5px 10px;
				position: relative;
				min-height: 35px
			}

			.amap_lib_placeSearch .poibox:last-child {
				border-bottom: none
			}

			.amap_lib_placeSearch .poibox .poi-title {
				margin-left: 25px;
				font-size: 13px;
				overflow: hidden
			}

			.amap_lib_placeSearch .poi-more {
				color: #0091ff;
				font-size: 12px;
				line-height: 22px;
				white-space: nowrap;
				vertical-align: baseline
			}

			.amap-pl-pc .poi-more,
			.amap-pl-pc .poi-name {
				vertical-align: middle
			}

			.amap_lib_placeSearch .poibox .poi-info {
				word-break: break-all;
				margin: 0 0 0 25px;
				overflow: hidden
			}

			.amap_lib_placeSearch .poibox .poi-info p {
				color: #999;
				font-family: Tahoma;
				line-height: 20px
			}

			.amap_lib_placeSearch p {
				margin: 0
			}

			.amap_lib_placeSearch h1,
			h2,
			h3,
			h4,
			h5 {
				font-weight: 400;
				margin: 0
			}

			.amap_lib_placeSearch .poibox.active,
			.amap_lib_placeSearch .poibox.hover,
			.amap_lib_placeSearch .poibox:hover {
				background: #f6f6f6
			}

			.amap_lib_placeSearch .poibox .select-btn {
				margin-left: 25px;
				margin-top: 6px;
				border: 0;
				color: #fff;
				cursor: pointer;
				padding: 3px 6px;
				border-radius: 2px;
				background-color: #0091ff
			}

			.amap-combo-close {
				position: absolute;
				top: 11px;
				right: 10px;
				background: url(http://webapi.amap.com/theme/v1.3/images/amap-info.png) -1px -151px no-repeat;
				width: 12px;
				height: 12px;
				cursor: pointer
			}

			.amap-content-body {
				min-width: 200px;
				max-width: 240px;
				font-family: Helvetica, "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑", Arial, sans-serif;
				box-shadow: 0 0 .5px rgba(0, 0, 100, .6);
				background: #fff;
				border-radius: 2px;
				text-align: left;
				border: 1px solid silver
			}

			.amap-combo-sharp {
				margin: 0 auto;
				bottom: 1px;
				position: relative;
				background: url(http://webapi.amap.com/theme/v1.3/images/amap-info.png) -5px -564px no-repeat;
				width: 18px;
				height: 9px
			}

			.amap-pl-pc .poi-img {
				float: right;
				margin: 3px 8px 0;
				width: 90px;
				height: 56px;
				overflow: hidden
			}

			.amap-pl-pc .poi-more {
				display: inline-block;
				width: 16px;
				height: 16px;
				text-indent: -1000em;
				background: url(http://webapi.amap.com/theme/v1.3/images/newpc/tips.png) center center no-repeat;
				cursor: pointer;
				opacity: .5;
				margin: 1px 0 1px 2px;
				background-size: 85%
			}

			.amap-pl-pc .poi-more:hover {
				opacity: 1;
				background-size: 100%
			}

			.amap_lib_placeSearch .clear {
				clear: both
			}

			.amap-pls-marker-tip {
				position: absolute;
				background: #fff;
				display: none;
				top: 0;
				left: -100px;
				min-width: 100px;
				width: auto;
				white-space: nowrap;
				line-height: 200%;
				padding: 0 0 0 7px;
				font-size: 13px;
				border-radius: 2px;
				-webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, .5);
				-moz-box-shadow: 0 0 8px 0 rgba(0, 0, 0, .5);
				box-shadow: 0 0 8px 0 rgba(0, 0, 0, .5);
				transition: all .5s 1s;
				z-index: 150
			}

			.amap-pls-marker-tip .title {
				display: inline-block;
				vertical-align: middle;
				max-width: 150px;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-right: 35px
			}

			.amap_lib_placeSearch_child_con .amap-pls-marker-tip {
				top: -7px
			}

			.amap-marker .hover .amap_lib_placeSearch_child_con .amap-pls-marker-tip {
				left: 23px
			}

			.amap-marker .hover .amap-pls-marker-tip {
				display: block;
				left: 28px
			}

			.amap-marker .hover.selected .amap-pls-marker-tip {
				display: none
			}

			.amap-pls-marker-tip::after,
			.amap-pls-marker-tip::before {
				content: "";
				width: 0;
				height: 0;
				top: 50%;
				left: 0;
				margin-top: -7px;
				margin-left: -15px;
				position: absolute;
				border: 7px solid transparent;
				border-right: 8px solid rgba(51, 51, 51, .2)
			}

			.amap-pls-marker-tip::after {
				margin-left: -14px;
				border-right: 8px solid rgba(255, 255, 255, 1)
			}
		</style>
		<style type="text/css">
			.amap-indoor-map .label-canvas {
				position: absolute;
				top: 0;
				left: 0
			}

			.amap-indoor-map .highlight-image-con * {
				pointer-events: none
			}

			.amap-indoormap-floorbar-control {
				position: absolute;
				margin: auto 0;
				bottom: 165px;
				right: 12px;
				width: 35px;
				text-align: center;
				line-height: 1.3em;
				overflow: hidden;
				padding: 0 2px
			}

			.amap-indoormap-floorbar-control .panel-box {
				background-color: rgba(255, 255, 255, .9);
				border-radius: 3px;
				border: 1px solid #ccc
			}

			.amap-indoormap-floorbar-control .select-dock {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				box-sizing: border-box;
				height: 30px;
				border: solid #4196ff;
				border-width: 0 2px;
				border-radius: 2px;
				pointer-events: none;
				background: linear-gradient(to bottom, #f6f8f9 0, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%)
			}

			.amap-indoor-map .transition {
				transition: opacity .2s
			}

			,
			.amap-indoormap-floorbar-control .transition {
				transition: top .2s, margin-top .2s
			}

			.amap-indoormap-floorbar-control .select-dock:after,
			.amap-indoormap-floorbar-control .select-dock:before {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				left: 0;
				top: 10px;
				border: solid transparent;
				border-width: 4px;
				border-left-color: #4196ff
			}

			.amap-indoormap-floorbar-control .select-dock:after {
				right: 0;
				left: auto;
				border-left-color: transparent;
				border-right-color: #4196ff
			}

			.amap-indoormap-floorbar-control.is-mobile {
				width: 37px
			}

			.amap-indoormap-floorbar-control.is-mobile .floor-btn {
				height: 35px;
				line-height: 35px
			}

			.amap-indoormap-floorbar-control.is-mobile .select-dock {
				height: 35px;
				top: 36px
			}

			.amap-indoormap-floorbar-control.is-mobile .select-dock:after,
			.amap-indoormap-floorbar-control.is-mobile .select-dock:before {
				top: 13px
			}

			.amap-indoormap-floorbar-control.is-mobile .floor-list-box {
				height: 105px
			}

			.amap-indoormap-floorbar-control .floor-list-item .floor-btn {
				color: #555;
				font-family: "Times New Roman", sans-serif, "Microsoft Yahei";
				font-size: 16px
			}

			.amap-indoormap-floorbar-control .floor-list-item.selected .floor-btn {
				color: #000
			}

			.amap-indoormap-floorbar-control .floor-btn {
				height: 28px;
				line-height: 28px;
				overflow: hidden;
				cursor: pointer;
				position: relative;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none
			}

			.amap-indoormap-floorbar-control .floor-btn:hover {
				background-color: rgba(221, 221, 221, .4)
			}

			.amap-indoormap-floorbar-control .floor-minus,
			.amap-indoormap-floorbar-control .floor-plus {
				position: relative;
				text-indent: -1000em
			}

			.amap-indoormap-floorbar-control .floor-minus:after,
			.amap-indoormap-floorbar-control .floor-plus:after {
				content: "";
				position: absolute;
				margin: auto;
				top: 9px;
				left: 0;
				right: 0;
				width: 0;
				height: 0;
				border: solid transparent;
				border-width: 10px 8px;
				border-top-color: #777
			}

			.amap-indoormap-floorbar-control .floor-minus.disabled,
			.amap-indoormap-floorbar-control .floor-plus.disabled {
				opacity: .3
			}

			.amap-indoormap-floorbar-control .floor-plus:after {
				border-bottom-color: #777;
				border-top-color: transparent;
				top: -3px
			}

			.amap-indoormap-floorbar-control .floor-list-box {
				max-height: 153px;
				position: relative;
				overflow-y: hidden
			}

			.amap-indoormap-floorbar-control .floor-list {
				margin: 0;
				padding: 0;
				list-style: none
			}

			.amap-indoormap-floorbar-control .floor-list-item {
				position: relative
			}

			.amap-indoormap-floorbar-control .floor-btn.disabled,
			.amap-indoormap-floorbar-control .floor-btn.disabled *,
			.amap-indoormap-floorbar-control.with-indrm-loader * {
				-webkit-pointer-events: none !important;
				pointer-events: none !important
			}

			.amap-indoormap-floorbar-control .with-indrm-loader .floor-nonas {
				opacity: .5
			}

			.amap-indoor-map-moverf-marker {
				color: #555;
				background-color: #FFFEEF;
				border: 1px solid #7E7E7E;
				padding: 3px 6px;
				font-size: 12px;
				white-space: nowrap;
				display: inline-block;
				position: absolute;
				top: 1em;
				left: 1.2em
			}

			.amap-indoormap-floorbar-control .amap-indrm-loader {
				-moz-animation: amap-indrm-loader 1.25s infinite linear;
				-webkit-animation: amap-indrm-loader 1.25s infinite linear;
				animation: amap-indrm-loader 1.25s infinite linear;
				border: 2px solid #91A3D8;
				border-right-color: transparent;
				box-sizing: border-box;
				display: inline-block;
				overflow: hidden;
				text-indent: -9999px;
				width: 13px;
				height: 13px;
				border-radius: 7px;
				position: absolute;
				margin: auto;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0
			}

			@-moz-keyframes amap-indrm-loader {
				0% {
					-moz-transform: rotate(0);
					transform: rotate(0)
				}

				100% {
					-moz-transform: rotate(360deg);
					transform: rotate(360deg)
				}
			}

			@-webkit-keyframes amap-indrm-loader {
				0% {
					-webkit-transform: rotate(0);
					transform: rotate(0)
				}

				100% {
					-webkit-transform: rotate(360deg);
					transform: rotate(360deg)
				}
			}

			@keyframes amap-indrm-loader {
				0% {
					-moz-transform: rotate(0);
					-ms-transform: rotate(0);
					-webkit-transform: rotate(0);
					transform: rotate(0)
				}

				100% {
					-moz-transform: rotate(360deg);
					-ms-transform: rotate(360deg);
					-webkit-transform: rotate(360deg);
					transform: rotate(360deg)
				}
			}
		</style>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title></title>
		<style>
			html,
			body,
			#container {
				width: 100%;
				height: 100%;
				margin: 0px;
				font-size: 13px;
			}

			#pickerBox {
				position: absolute;
				z-index: 9999;
				top: 50px;
				left: 30px;
				width: 300px;
			}
			
					#pickerBox2 {
				position: absolute;
				z-index: 9999;
				top: 50px;
				left: 350px;
				width: 300px;
			}

			#pickerInput {
				width: 200px;
				padding: 5px 5px;
			}



			.amap_lib_placeSearch .poibox.highlight {
				background-color: #CAE1FF;
			}

			.amap_lib_placeSearch .poi-more {
				display: none !important;
			}

			.amap-logo {
				display: none !important;
			}

			.amap-copyright {
				display: none !important;
			}
		</style>
		<style type="text/css">
			.amap-container {
				cursor: url(http://webapi.amap.com/theme/v1.3/openhand.cur), default;
			}

			.amap-drag {
				cursor: url(http://webapi.amap.com/theme/v1.3/closedhand.cur), default;
			}
		</style>
		<script type="text/javascript" charset="utf-8" async="" data-requirecontext="amap-ui-1.0.11" data-requiremodule="ui/misc/PoiPicker"
		 src="http://webapi.amap.com/ui/1.0/ui/misc/PoiPicker.js?v=1.0.11&amp;mt=ui&amp;key=160cab8ad6c50752175d76e61ef92c50"></script>
		<script type="text/javascript" charset="utf-8" async="" data-requirecontext="amap-ui-1.0.11" data-requiremodule="http://webapi.amap.com/count?type=UIInit&amp;k=160cab8ad6c50752175d76e61ef92c50"
		 src="http://webapi.amap.com/count?type=UIInit&amp;k=160cab8ad6c50752175d76e61ef92c50&amp;v=1.0.11"></script>
		<style type="text/css">
			.amap-ui-poi-picker-search-results-container,
			.amap-ui-poi-picker-sugg-container {
				position: absolute;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				padding: 0;
				overflow: auto;
				z-index: 9999
			}

			.amap-ui-poi-picker-search-results-container p.amap_lib_placeSearch {
				margin: 0;
				padding: 3px 10px
			}

			.amap-ui-poi-picker-sugg-container {
				border: 1px solid #ccc;
				background: #fff
			}

			.amap-ui-poi-picker-search-results-container.hidden,
			.amap-ui-poi-picker-sugg-container.hidden,
			.amap-ui-poi-picker-sugg-container.no-sugg {
				display: none
			}

			.amap-ui-poi-picker-sugg-list {
				margin: 0;
				padding: 0
			}

			.amap-ui-poi-picker-sugg-list .sugg-item {
				margin: 0;
				border-bottom: 1px solid #eee;
				font-size: 1em;
				padding: 7px 5px 7px 23px;
				background: url(http://webapi.amap.com/ui/1.0/ui/misc/PoiPicker/assets/poi.png) no-repeat 5px 50%;
				vertical-align: middle;
				cursor: pointer
			}

			.amap-ui-poi-picker-sugg-list .sugg-item.sugg-no-id {
				background: url(http://webapi.amap.com/ui/1.0/ui/misc/PoiPicker/assets/search.png) no-repeat 5px 50%
			}

			.amap-ui-poi-picker-sugg-list .sugg-item.highlight,
			.amap-ui-poi-picker-sugg-list .sugg-item:hover {
				background-color: #cae1ff
			}

			.amap-ui-poi-picker-sugg-list .sugg-item:last-child {
				border-bottom: none
			}

			.amap-ui-poi-picker-sugg-list .sugg-address {
				display: none
			}

			.amap-ui-poi-picker-sugg-list .sugg-district {
				font-size: 90%;
				color: #999;
				margin-left: 5px
			}
		</style>
		<script type="text/javascript" charset="utf-8" async="" data-requirecontext="amap-ui-1.0.11" data-requiremodule="jquery"
		 src="http://webapi.amap.com/ui/1.0/plug/ext/jquery-1.12.4.min.js?v=1.0.11"></script>
	</head>

	<body style="">
		<div id="container" class="map amap-container" tabindex="0" style="position: relative; background: rgb(252, 249, 242); cursor: url(&quot;http://webapi.amap.com/theme/v1.3/openhand.cur&quot;), default;"

		</div>
		<div id="pickerBox">
			<input id="pickerInput" placeholder="输入关键字选取地点">
		</div>

		
		<script type="text/javascript" src="//webapi.amap.com/maps?v=1.3&amp;key=160cab8ad6c50752175d76e61ef92c50"></script>
		<!-- UI组件库 1.0 -->
		<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
		<script type="text/javascript">
			var map = new AMap.Map('container', {
				zoom: 10
			});

			AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {

				var poiPicker = new PoiPicker({
					//city:'北京',
					input: 'pickerInput'
				});

				//初始化poiPicker
				poiPickerReady(poiPicker);
			});

			function poiPickerReady(poiPicker) {

				window.poiPicker = poiPicker;

				var marker = new AMap.Marker();

				var infoWindow = new AMap.InfoWindow({
					offset: new AMap.Pixel(0, -20)
				});

				//选取了某个POI
				poiPicker.on('poiPicked', function(poiResult) {

					var source = poiResult.source,
						poi = poiResult.item,
						info = {
							source: source,
							id: poi.id,
							name: poi.name,
							location: poi.location.toString(),
							address: poi.address
						};

					marker.setMap(map);
					infoWindow.setMap(map);

					marker.setPosition(poi.location);
					infoWindow.setPosition(poi.location);

					infoWindow.setContent('POI信息: <pre>' + JSON.stringify(info, null, 2) + '</pre>');
					var lng = window.parent.document.getElementById('lng');
					var lat = window.parent.document.getElementById('lat');
					var local = window.parent.document.getElementById('local');
					lng.value = poi.location.lng;
					lat.value = poi.location.lat;
					local.value = poi.district + poi.address;

					infoWindow.open(map, marker.getPosition());

					map.setCenter(marker.getPosition());
				});

				poiPicker.onCityReady(function() {
					poiPicker.suggest('');
				});
			}
		</script>
		<script type="text/javascript" src="//webapi.amap.com/demos/js/liteToolbar.js?v=1.0.11"></script>

	</body>
</html>
